<template>
  <div
    v-loading="loading"
    style="padding: 10px; border: 1px solid rgba(242, 242, 242, 1); width: 100%"
  >
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="长嘱" name="first">
        <!-- <Table1 :List="List"  /> -->
        <template v-if="List && List.medicalDetailMap">
          <table
            border="1"
            cellspacing="0"
            cellpadding="0"
            align="center"
            bordercolor="#ccc"
            v-loading="loading"
            style="border-collapse: collapse; float: left"
          >
            <tr>
              <td
                style="
                  width: 150px;
                  height: 50px;
                  padding: 0 5px;
                  box-sizing: border-box;
                "
                id="lineTd"
                v-if="List && List.medicalDetailMap"
              >
                <span style="float: left; margin-top: 5px">药物</span>
                <span style="float: right; margin-top: -3px">入院时间</span>
              </td>
              <td
                align="center"
                v-for="(item, index) in List.inHospitalDays"
                :key="index + 'g'"
                width="60"
                height="50"
                style="white-space: nowrap"
              >
                <!-- D{{ index + 1 }} -->
                {{ item }}
              </td>
            </tr>
            <tr
              v-for="(value, key, index) in List.medicalDetailMap"
              :key="index + 'f'"
            >
              <td
                align="center"
                height="50"
                width="150"
                :style="'background-color:' + value[0].color + ';'"
                style="white-space: nowrap"
              >
                {{ key ? key.split("~")[0] : key }}
              </td>
              <template v-if="value[0].beginDay !== 1">
                <td
                  width="60"
                  height="50"
                  align="center"
                  v-for="(item, index) in value[0].beginDay - 1"
                  :key="index + 'a'"
                ></td>
              </template>
              <template v-if="value.length == 1">
                <td
                  width="60"
                  height="50"
                  align="center"
                  v-for="(item, index) in value"
                  :key="index + 'b'"
                  :colspan="item.endDay - item.beginDay + 1"
                  style="background-color: #1292b9"
                >
                  {{ item.usageAndDosage }}
                </td>
              </template>
              <!-- <template v-else>
                <template v-for="(item, index) in value">
                  <td
                    v-if="shouldRender(index, value)"
                    :key="index + 'c'"
                    align="center"
                    width="45"
                    :colspan="
                      item.beginDay ? item.endDay - item.beginDay + 1 : ''
                    "
                    :style="item.beginDay ? 'background-color: #1292b9' : ''"
                  >
                    {{ item.usageAndDosage }}
                  </td>
                  <template v-if="item.time !== 0 && item.time > 0">
                    <td
                      align="center"
                      width="45"
                      v-for="(item, index) in item.time"
                      :key="index"
                    ></td>
                  </template>
                </template>
              </template> -->
              <template v-if="days - value[value.length - 1].endDay > 0">
                <td
                  width="60"
                  height="50"
                  align="center"
                  v-for="(item, index) in days - value[value.length - 1].endDay"
                  :key="index + 'e'"
                ></td>
              </template>
            </tr>
          </table>
        </template>
        <div v-else>
          <el-empty :image-size="150" description="暂无用药数据"></el-empty>
        </div>
      </el-tab-pane>
      <el-tab-pane label="临嘱" name="second">
        <!-- <Table2 :List2="List2"/> -->
        <template v-if="List2 && List2.medicalDetailMap">
          <table
            border="1"
            cellspacing="0"
            cellpadding="0"
            align="center"
            bordercolor="#ccc"
            v-loading="loading"
            style="border-collapse: collapse; float: left"
          >
            <tr>
              <td
                style="
                  width: 150px;
                  height: 50px;
                  padding: 0 5px;
                  box-sizing: border-box;
                "
                id="lineTd"
                v-if="List2 && List2.medicalDetailMap"
              >
                <span style="float: left; margin-top: 5px">药物</span>
                <span style="float: right; margin-top: -3px">入院时间</span>
              </td>
              <td
                align="center"
                v-for="(item, index) in List2.inHospitalDays"
                :key="index + 'g'"
                width="60"
                height="50"
                style="white-space: nowrap"
              >
                <!-- D{{ index + 1 }} -->
                {{ item }}
              </td>
            </tr>
            <tr
              v-for="(value, key, index) in List2.medicalDetailMap"
              :key="index + 'f'"
            >
              <td
                height="50"
                width="150"
                align="center"
                :style="'background-color:' + value[0].color + ';'"
                style="white-space: nowrap"
              >
                {{ key ? key.split("~")[0] : key }}
              </td>
              <template v-if="value[0].beginDay !== 1">
                <td
                  width="60"
                  height="50"
                  align="center"
                  v-for="(item, index) in value[0].beginDay - 1"
                  :key="index + 'a'"
                ></td>
              </template>
              <template v-if="value.length == 1">
                <td
                  width="60"
                  height="50"
                  align="center"
                  v-for="(item, index) in value"
                  :key="index + 'b'"
                  :colspan="item.endDay - item.beginDay + 1"
                  style="background-color: #1292b9"
                >
                  {{ item.usageAndDosage }}
                </td>
              </template>
              <!-- <template v-else>
                <template v-for="(item, index) in value">
                  <td
                    v-if="shouldRender(index, value)"
                    :key="index + 'c'"
                    align="center"
                    width="45"
                    :colspan="
                      item.beginDay ? item.endDay - item.beginDay + 1 : ''
                    "
                    :style="item.beginDay ? 'background-color: #1292b9' : ''"
                  >
                    {{ item.usageAndDosage }}
                  </td>
                  <template
                    v-if="item.time && item.time !== 0 && item.time > 0"
                  >
                    <td
                      align="center"
                      width="45"
                      v-for="(item, index) in item.time"
                      :key="index"
                    ></td>
                  </template>
                </template>
              </template> -->
              <template v-if="days2 - value[value.length - 1].endDay > 0">
                <td
                  width="60"
                  height="50"
                  align="center"
                  v-for="(item, index) in days2 -
                  value[value.length - 1].endDay"
                  :key="index + 'e'"
                ></td>
              </template>
            </tr>
          </table>
        </template>
        <div v-else>
          <el-empty :image-size="150" description="暂无用药数据"></el-empty>
        </div>
      </el-tab-pane>
      <el-tab-pane label="中药饮片" name="third">
        <!-- <Table3 :List3="List3"/> -->
        <template v-if="List3 && List3.medicalDetailMap">
          <table
            border="1"
            cellspacing="0"
            cellpadding="0"
            align="center"
            bordercolor="#ccc"
            v-loading="loading"
            style="border-collapse: collapse; float: left"
          >
            <tr>
              <td
                style="height: 50px; padding: 0 5px"
                id="lineTd"
                v-if="List3 && List3.medicalDetailMap"
              >
                <span style="float: left; margin-top: 5px">药物</span>
                <span style="float: right; margin-top: -3px">入院时间</span>
              </td>
              <td
                align="center"
                v-for="(item, index) in List3.inHospitalDays"
                :key="index + 'g'"
                width="60"
                height="50"
                style="white-space: nowrap"
              >
                {{ item }}
              </td>
            </tr>
            <tr
              v-for="(item, index) in List3.traditionalGroupList"
              :key="index + 'f'"
            >
              <td
                id="tdzhongyao"
                align="center"
                :style="'background-color:' + item.color + ';'"
                height="50"
                style="white-space: nowrap"
              >
                <span
                  v-for="(val, index) in item.pillsNameList"
                  :key="index + 'cccc'"
                >
                  {{ val }}
                  <br
                    v-if="
                      (index + 1) % 4 === 0 &&
                      index !== item.pillsNameList.length - 1
                    "
                  />
                </span>
              </td>
              <template v-if="item.beginDay !== 1">
                <td
                  width="60"
                  height="50"
                  align="center"
                  v-for="(val, index) in item.beginDay - 1"
                  :key="index + 'a'"
                ></td>
              </template>
              <template>
                <td
                  width="60"
                  height="50"
                  align="center"
                  :key="index + 'b'"
                  :colspan="item.endDay - item.beginDay + 1"
                  style="background-color: #1292b9"
                >
                  {{ item.usageAndDosage }}
                </td>
              </template>
              <template v-if="days3 - item.endDay > 0">
                <td
                  width="60"
                  height="50"
                  align="center"
                  v-for="(item, index) in days3 - item.endDay"
                  :key="index + 'e'"
                ></td>
              </template>
            </tr>
          </table>
        </template>
        <div v-else>
          <el-empty :image-size="150" description="暂无用药数据"></el-empty>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Table1 from "./table1";
import Table2 from "./table2";
import Table3 from "./table3";
import { shaft, group } from "@/api/workstation/baseInfo.js";
export default {
  name: "yongyaoshijianzhou",
  props: ["medicalRecordNo", "ruyuanTime", "chuyuanTime"],
  data() {
    return {
      loading: false,
      activeName: "first",
      List: { inHospitalDays: "", medicalDetailMap: {} },
      List2: { inHospitalDays: "", medicalDetailMap: {} },
      List3: { inHospitalDays: "", medicalDetailMap: {} },
      days: "",
      days2: "",
      days3: "",
      ruyuanday: "",
      chuyuanday: "",
    };
  },
  components: {
    Table1,
    Table2,
    Table3,
  },
  created() {
    // this.getList();
  },
  watch: {
    ruyuanTime: {
      immediate: true, // 首次执行
      handler(value) {
        if (value) {
          // 这里是子组件操作数据的代码
          console.log(value);
          this.ruyuanday = value;
        }
      },
    },
    chuyuanTime: {
      immediate: true, // 首次执行
      handler(value) {
        if (value) {
          // 这里是子组件操作数据的代码
          console.log(value);
          this.chuyuanday = value;
        }
      },
    },
  },
  methods: {
    getList() {
      this.loading = true;
      group(this.medicalRecordNo, "1")
        .then((res) => {
          if (res.code == 200) {
            this.List = res.data || [];
            this.days = res.data.inHospitalDays;
            this.List.inHospitalDays = this.getDateAfterDays(
              res.data.inHospitalDays
            );
          }
        })
        .finally(() => {
          this.loading = false;
        });
      group(this.medicalRecordNo, "2").then((res) => {
        if (res.code == 200) {
          this.List2 = res.data || [];
          this.days2 = res.data.inHospitalDays;
          this.List2.inHospitalDays = this.getDateAfterDays(
            res.data.inHospitalDays
          );
        }
      });
      // .finally(() => {
      //   this.loading = false;
      // });
      group(this.medicalRecordNo, "3").then((res) => {
        if (res.code == 200) {
          this.List3 = res.data || [];
          this.days3 = res.data.inHospitalDays;
          this.List3.inHospitalDays = this.getDateAfterDays(
            res.data.inHospitalDays
          );
          console.log("[ this.List3  ] >", this.List3);
        }
      });
      // .finally(() => {
      //   this.loading = false;
      // });
    },
    getDateAfterDays(days) {
      const chuyuanDate = this.chuyuanday
        ? new Date(this.chuyuanday.replace(/-/g, "/"))
        : new Date();
      const startTime =
        chuyuanDate.getTime() - (days - 1) * 24 * 60 * 60 * 1000;
      const startDate = new Date(startTime);
      const result = [];
      for (let i = 0; i < days; i++) {
        const month = startDate.getMonth() + 1;
        const date = startDate.getDate();
        result.push(`${month}月${date}日`);
        startDate.setDate(startDate.getDate() + 1);
      }
      return result;
    },
    handleClick(tab, event) {
      // switch (tab.name) {
      //   case "first":
      //     console.log(tab);
      //     break;
      //   case "second":
      //     console.log(tab);
      //     shaft(this.medicalRecordNo, "2").then((res) => {
      //       if (res.code == 200) {
      //         this.List2 = res.data;
      //       }
      //     });
      //     break;
      //   case "third":
      //     console.log(tab);
      //     shaft(this.medicalRecordNo, "3").then((res) => {
      //       if (res.code == 200) {
      //         this.List3 = res.data;
      //       }
      //     });
      //     break;
      //   default:
      //     break;
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
#lineTd {
  background: #fff
    url()
    no-repeat 100% center;
}
::v-deep .el-tabs__content {
  width: 100%;
  overflow-x: auto;
  padding: 10px;
}
// ::v-deep .el-tabs--card > .el-tabs__header {
//   width: 250px;
// }
</style>
